<template>
    <div class="item">
        <input type="text" :value="todo.title">
        <button @click="del(todo.id)">删除</button>
    </div>
</template>

<script setup>
    import useTodo from '../composables/useTodo.js'
    const {del} = useTodo();
    const {todo} = defineProps({
        todo:{type:Object,required:true}
    });

</script>

<style lang="scss">
    // 子组件的样式默认继承父组件传递过来的，解决办法：第一种、在外面多套一层，让继承的加在最外面；第二种、用类名，可以阻止样式继承(推荐)
    div.item{
        display:flex;
        input{
            padding:10px;
            flex: 1;
        }
        button{
            margin-left: 10px;
            background-color:#e74c3c;
            color: white;
            border:none;
            padding:5px 10px;
        }
    }
</style>